<template>
  <div class="p-4">
    <div class="font-bold text-[1.5rem] mb-4">请选择屏幕</div>
    <ul>
      <li
        v-for="item in screenList"
        :class="{ active: currentScreen.value === item.value }"
        class="border h-[80px] flex justify-center items-center cursor-pointer"
      >
        {{ item.label.toUpperCase() }}
      </li>
    </ul>
  </div>
</template>

<script setup lang="ts">
import { screenList, currentScreen } from '../screen/screen';
</script>

<style lang="scss" scoped>
li {
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
}
.active {
  background: var(--primary);
  color: white;
}
</style>
